<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>随机午餐</title>
</head>
<body>
    <div style="text-align:center">
        <h1 id="textBox">午餐吃什么呢</h1>
        <input id="btn" type="button" value="随机！" onclick="randomIt()" style="width:120px;height:32px;text-align:center">
        <br /><br />
        <input id="userEnter" type="text" value="煲粥+布拉肠 煲粥+炒面 蒸包 汤粉面" style="width:80%;height:32px;text-align:center" placeholder="输入候选词并以空格分隔"/>
    </div>
    
    <script>
        var roll, lunch;
        var btn = document.getElementById("btn");
        var textBox = document.getElementById("textBox");
        var userEnter = document.getElementById("userEnter");
        var restart = false;

        function randomIt() {
            if (userEnter.value===undefined) return;
            lunch = userEnter.value.split(" ");
            if (!restart) {
                btn.setAttribute("value", "选定");
                roll = setInterval(function(){
                    var seed = Math.round(Math.random()*(lunch.length-1));
                    textBox.innerHTML = lunch[seed];
                }, 30);
            } else {
                btn.setAttribute("value", "随机！");
                clearInterval(roll);
                roll = null;
            }
            restart = !restart;
        }
    </script>
</body>
</html>